<!-- 首页 -->

<template>
    <div class="home-content-page">
        <div class="warp">
            <CustomSwiper />
        </div>
        <div class="content">
            <div class="content-card" v-for="(item,index) in newsData" :key="index">
                <div class="card-header">
                    <span class="card-header-title">{{item.title}}</span>
                    <a class="card-header-more" href="#/announcement">
                        更多
                        <img src="@/assets/images/u16.png" alt="">
                    </a>
                </div>
                <div class="card-content">
                    <div 
                      class="list-item cursor-pointer" 
                      v-for="(subItem,subIndex) in item.news" 
                      :key="subIndex"
                      @click="handleItem"
                    >
                        <img class="list-item-icon" src="@/assets/images/u19.png" alt="">
                        <span class="list-item-content">{{subItem.title}}</span>
                        <span class="time">{{subItem.time}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { reactive, toRefs } from 'vue';
import { useRouter } from 'vue-router'
import CustomSwiper from '@/components/CustomSwiper.vue';

export default {
    components: {
        CustomSwiper
    },
    data() {
        const data = reactive({
            newsData: [
                {
                    title: '招标预告',
                    news: [
                        {
                            title: '【麻城市中心】麻城经济开发区谌家园小学...',
                            time: '2023-04-13'
                        },
                        {
                            title: '【麻城市中心】麻城市农村公路管理局招标...',
                            time: '2023-04-13'
                        },
                        {
                            title: '【麻城市中心】麻城经济开发区谌家园小学...',
                            time: '2023-04-13'
                        },
                        {
                            title: '【汉川市中心】汉川电厂四期扩建工程电力...',
                            time: '2023-04-13'
                        },
                        {
                            title: '【红安县中心】红安县2023年度小型水库安...',
                            time: '2023-04-13'
                        }
                    ]
                },
                {
                    title: '招标公告',
                    news: [
                        {
                            title: '平煤隆基新能源科技有限公司—一二期电...',
                            time: '2023-04-13'
                        },
                        {
                            title: '【2023年第4批电气杂项备件询比价采购...',
                            time: '2023-04-13'
                        },
                        {
                            title: '平煤隆基新能源科技有限公司一二期硅烷...',
                            time: '2023-04-13'
                        },
                        {
                            title: '云南省中医医院污水运维项目咨询邀请公告',
                            time: '2023-04-13'
                        },
                        {
                            title: '平煤隆基新能源科技有限公司一动力厂房...',
                            time: '2023-04-13'
                        }
                    ]
                },
                {
                    title: '中标公告',
                    news: [
                        {
                            title: '山东省淄博市山东盞泉医药有限公司线路迁...',
                            time: '2023-04-13'
                        },
                        {
                            title: '张家界旅游学校关于果盆/果盘/果篮的网上...',
                            time: '2023-04-13'
                        },
                        {
                            title: '长沙市芙蓉区朝阳小学关于其他广告服务的...',
                            time: '2023-04-13'
                        },
                        {
                            title: '沙沟村特色农畜产品电商综合服务中心建设...',
                            time: '2023-04-13'
                        },
                        {
                            title: '涟源市工贸中专关于LED头灯的网上超市采...',
                            time: '2023-04-13'
                        }
                    ]
                },
                {
                    title: '企业采购',
                    news: [
                        {
                            title: '慈利县三合镇国太桥中学关于新鲜水果的...',
                            time: '2023-04-13'
                        },
                        {
                            title: '兰陵县第七中学七中2023年保安经费成交公告',
                            time: '2023-04-13'
                        },
                        {
                            title: '(XJ023041300027)CG-连接器询价',
                            time: '2023-04-13'
                        },
                        {
                            title: '岳阳县公安局关于机械硬盘的网上超市采购...',
                            time: '2023-04-13'
                        },
                        {
                            title: '青州市机关事务服务中心车辆保险成交公告',
                            time: '2023-04-13'
                        }
                    ]
                }
            ]
        })
        const router = useRouter()
        // 点击查看信息详情
        function handleItem(item) {
            console.log(item)
            router.push({
                name: 'Details'
            })
        }
        return {
            ...toRefs(data),
            handleItem
        };
    }
}
</script>

<style scoped>
.warp {
    width: 100%;
    height: 150px;
}
.content {
    width: 100%;
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.content-card {
    width: 47%;
    margin: 0 0 40px 20px;
    background: #fff;
    border-radius: 12px;
}
.card-header {
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 15px 0 20px;
    background-image: url('@/assets/images/u12.png');
    background-repeat: no-repeat;
    background-size: cover;
}
.card-header-title {
    font-size: 20px;
    line-height: 50px;
    color: #fff;
}
.card-header-more {
    font-size: 13px;
    color: #999;
    display: flex;
    justify-content: center;
    align-items: center;
}
.card-header-more>img {
    width: 13px;
    height: 13px;
    margin-left: 5px;
}
.list-item {
    display: flex;
    flex-direction: row;
    align-content: center;
    margin: 20px 15px 20px 10px;
    font-size: 15px;
    color: #333;
}
.list-item-icon {
    width: 20px;
    height: 20px;
    margin: 0 10px;
}
.list-item-content {
    flex: 1;
}
</style>